<template>
    <div class="wrap" v-if="listRoutes.length">
        <div class="wrapInner">
            <router-link
                v-for="(item,idx) in listRoutes"
                :key="item.path"
                :to="item.path"
                tag="p">
                {{listNames[idx]}}
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        props:['route'],
        computed:{
            listRoutes(){
                const allRoutes = this.$router.options.routes;
                const newsobj = allRoutes.find(item=> item.path === '/news');
                newsobj.children = [{path: "/news/events"},{path: "/news/information/0/list"},{path: "/news/information/1/list"}]
                const tarRoute = allRoutes.find(item=> item.path === this.route);
                return tarRoute.children || [];
            },
            listNames(){
                const str = this.route.substr(1,)
                return this.$t(`${str}.nav`);
            }
        },
        mounted(){
            console.log(this.listRoutes)
        }
    }
</script>

<style lang="less" scoped>
.router-link-exact-active {
    color: #D73A42!important;
}
.wrap {
    z-index: 8;
    padding: 4px;
    background-color: #E6E6EC;
    width: auto;
    &::after {
        position: absolute;
        left: 20%;
        top: -8px;
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-top: 0;
        border-bottom-color: #E6E6EC;
    }
    .wrapInner {
        background-color: #fff;
        padding: 20px 12px;
        position: relative;
        &::after {
            position: absolute;
            left: 20%;
            top: -6px;
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-top: 0;
            border-bottom-color: #fff;
        }
        p {
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-bottom: 20px;
            line-height: 1;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
</style>